<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>合同支付展示页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css">
    <style>
        #contractPayQR {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        #contractPayQR #qrcode {
            margin: auto;
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <table class="layui-table" id="contractTable"  lay-filter="contractTable"></table>
</div>
<div id="contractPay" lay-filter="contractPay" style="display: none">
    <span>付款码:</span><input type="text" name="payCode">
</div>

<div  id="contractPayQR" lay-filter="contractPayQR" style="display: none;">
    <div id="qrcode" lay-filter="qrcode" style="margin: auto"></div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<script src="${pageContext.request.contextPath}/static/js/qrcode.min.js"></script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="pay">扫码枪</a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="payQR">二维码</a>
</script>
<script>
    layui.use(['table'], function(){
        var table = layui.table;
        // 渲染表格
        table.render({
            elem: '#contractTable',
            url: 'pay/payContractOrder', // 数据接口，替换成您的后端接口地址
            height:400,
            page: true, // 开启分页
            limit: 5, // 每页显示的数量
            cols: [[ // 表头
                {field: 'quotationNumber', title: '订单编号', width: 150},
                {field: 'contractType', title: '合同类型', width: 110,templet:function(conType){
                        if (conType.contractType=="1"){
                            return "销售合同";
                        }else if (conType.contractType=="2"){
                            return "采购合同";
                        }
                    }},
                {field: 'contractNumber', title: '合同编号', width: 110},
                {field: 'orderMoney', title: '代付金额', width: 100},
                {field: 'clientName', title: '甲方', width: 150},
                {field: 'clientPhone', title: '联系电话', width: 150},
                {field: 'clientAddress', title: '甲方地址', width: 150},
                {field: 'clientId', title: '客户编号',hide:true, width: 150},
                {field: 'contractId', title: '合同id',hide:true, width: 150},
                {fixed: '', width: 200, title: '支付方式', toolbar: '#barDemo'}
            ]]
        });
        // 监听表格工具条
        table.on('tool(contractTable)', function(obj){
            var data = obj.data; // 当前行数据
            var layEvent = obj.event; // 点击的事件名
            var table = layui.table;
            var layer = layui.layer;
            if(layEvent === 'pay'){
                layer.open({
                    title: '合同结款',
                    type: 1,
                    content: $('#contractPay'),
                    area: ['250px', '230px'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var contractNumber = data.contractNumber;
                        var payCode = $('input[name="payCode"]').val();
                        var clientId = data.clientId;
                        var requestData = {
                            contractNumber:contractNumber,
                            payCode:payCode,
                            clientId:clientId
                        }
                        $.ajax( {
                            "url"            :  "pay/payForPayContract",
                            "type"         :  "post",
                            "data"         : JSON.stringify(requestData),
                            "dataType" :  "json",
                            'contentType':"application/json;charset=utf-8",
                            "success"  :  function(result) {
                                layer.msg(result.message)
                            },
                            "error"       :  function() {
                                alert("出错了")
                            }
                        } );

                        layer.close(index); // 关闭弹窗

                    },
                    btn2: function (index, layero) {
                        layer.close(index); // 关闭弹窗
                    }
                });
            }else if (layEvent === 'payQR'){
                layer.open({
                    title: '合同结款',
                    type: 1,
                    content: $('#contractPayQR'),
                    area: ['400px', '400px'],
                    success: function(layero, index) {
                        var contractNumber = data.contractNumber;
                        var clientId = data.clientId;
                        var requestData = {
                            contractNumber: contractNumber,
                            clientId: clientId
                        }
                        $.ajax({
                            url: "pay/getQrCode",
                            type: "post",
                            data: JSON.stringify(requestData),
                            dataType: "json",
                            contentType: "application/json;charset=utf-8",
                            success: function(result) {
                                if (result.code == 200) {
                                    $("#qrcode").empty(); // 清空容器内容
                                    new QRCode(document.getElementById("qrcode"), result.qrcode)
                                    $("#qrcode").show();
                                    var contractNumber = data.contractNumber;
                                    var siv = setInterval(function() {
                                        $.ajax({
                                            url: "pay/confirmFee",
                                            type: "get",
                                            dataType: "json",
                                            data: {contractNumber: contractNumber},
                                            success: function(rs) {
                                                console.log(rs.msg);
                                                if(rs.code == "200"){
                                                    var contractId=data.contractId
                                                    $.ajax({
                                                        "url": "contract/updateContractPay",
                                                        "type": "post",
                                                        "data": {contractId:contractId},
                                                        "dataType": "json",
                                                        //"contentType": "application/json;charset=utf-8",
                                                        "success": function (result) {
                                                            layer.msg(result.message);
                                                        },
                                                        "error": function () {
                                                            alert("出错了")
                                                        }
                                                    });
                                                    alert(rs.msg);
                                                    layer.close(index); // 关闭弹窗
                                                    clearInterval(siv);
                                                    var table = layui.table;
                                                    table.reload("contractTable");
                                                }
                                            }
                                        })
                                    }, 3000);
                                }
                            },
                            error: function() {
                                alert("出错了")
                            }
                        });
                    },
                    btn2: function(index, layero) {
                        layer.close(index); // 关闭弹窗
                    }
                });
            }
        });
    });
</script>
</body>
</html>